<template>
  <div class="more-container">
    <div class="inner-content">
      <!-- 顶部表单区域 -->
      <el-row>
        <el-col :span="4">
          <el-input
            v-model="topForm.searchword"
            placeholder="请搜索名称"
            clearable
          ></el-input>
        </el-col>
      </el-row>

      <!-- 通用顶部 -->
      <commonline
        :newText="'考场'"
        @addList="additem"
        @searchlist="searchlist"
        @resetform="resetform"
        :isshowAdd="checkPermission(['examplaceAdd'])"
      ></commonline>

      <!-- 考场弹窗 -->
      <examinationdialog
        @confirm="confirm"
        :formType="formtype"
        :isshowDialog="isshowDialogs"
        :dialogTitle="dialogTitle"
        @closedialog="closedialog"
      ></examinationdialog>

      <!-- 表格 -->
      <examinationtable
        @switchBack="switchBack"
        @deleteitem="deleteitem"
        @openedit="openedit"
        :tabData="tabList"
        @changepageTotal="changepageTotal"
        @changepage="changepage"
      ></examinationtable>
    </div>
  </div>
</template>

<script>
//引入组件
import commonline from '@/components/commonline/commonline'
// 弹窗
import examinationdialog from './component/examinationdialog'
//表单
import examinationtable from './component/examinationtable'
//api
import { getexamList, deleteRelation } from '@/api/exam'
//按钮权限验证
import checkPermission from '@/utils/permission'
export default {
  data() {
    return {
      //是否显示导入按钮
      isshowimportbnt:false,
      //数据是否请求成功
      isDataSuccess: false,
      //弹窗标题
      dialogTitle: '新增考场',
      //翻页总数
      pageTotal: 10,
      //第几页
      page: 1,
      //表格数据
      tabList: {},
      //新增还是编辑
      formtype: 0,
      //选中的那个tab
      activetab: 4,
      //顶部搜索
      topForm: {
        searchword: '',
      },
      //是否显示弹窗
      isshowDialogs: false,
    }
  },
  methods: {
    checkPermission,
    //列表切换switch 触发的事件
    switchBack() {
      this.getkcList(this.page, this.pageTotal)
    },
    //删除
    async deleteitem(id) {
      let params = {
        examId: id,
      }
      //询问客户是否删除
      this.$confirm('您确认要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let data = await deleteRelation(params)
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
          }
          //刷新列表
          this.getkcList(this.page, this.pageTotal)
        })
        .catch(() => {})
    },
    //总数翻页
    changepageTotal(val) {
      this.pageTotal = val
      this.getkcList(this.page, this.pageTotal)
    },
    //翻页
    changepage(val) {
      this.page = val
      this.getkcList(this.page, this.pageTotal)
    },
    //编辑和新增成功
    confirm() {
      this.isshowDialogs = false
      //刷新列表
      this.getkcList(this.page, this.pageTotal)
    },
    //获取列表数据
    async getkcList(page = 1, rows = 10) {
      let params = {
        page,
        rows,
      }
      if (this.topForm.searchword) {
        params.keyword = this.topForm.searchword
      }
      let data = await getexamList(params)
      this.tabList = data.data
    },
    openedit(val) {
      this.dialogTitle = val.type==1?'查看考场':'编辑考场'
      this.$bus.emit('editforkc', val)
      this.formtype = val.type
      this.isshowDialogs = true
      console.log(val)
    },
    //添加弹窗
    additem() {
      this.dialogTitle = '新增考场'
      this.isshowDialogs = true
    },
    //关闭弹窗
    closedialog() {
      this.formtype = 0
      this.isshowDialogs = false
    },
    //搜索查询
    searchlist() {
      this.$message({
        type: 'success',
        message: '查询成功!',
      })
      this.getkcList(this.page, this.pageTotal)
    },
    //重置
    resetform() {
      this.topForm.searchword = ''
      this.$message({
        type: 'success',
        message: '已重置!',
      })
      this.page = 1
      this.pageTotal = 10
      this.getkcList(this.page, this.pageTotal)
    },
    //切换tab
    changetab(id) {
      this.activetab = id
    },
  },
  components: {
    commonline,
    examinationdialog,
    examinationtable,
  },
  mounted() {
    //获取列表数据
    this.getkcList()
  },
}
</script>

<style scoped lang='scss'>
// .more-container{
//   background-color: #f6f8f9 !important;
//   .inner-content{
//     background-color: #fff !important;
//     padding: 20px;
//     box-sizing: border-box;
//     border-radius: 5px;
//   }
// }
</style>
